<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="../../../css/app.css">
    <link rel="stylesheet" type="text/css" href="../comm/swiper.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../../css/tabBar.css">
    <link rel="stylesheet" type="text/css" href="../comm/shop_comm.css"/>
    <link rel="stylesheet" type="text/css" href="./search_detail.css">
    <title>搜索</title>
</head>
  <body>

    <div class="container" style="display:none">
      <div class="fixed">
        <div class="padding-top" style="height: 2.45rem;background-color:#fff;"></div>
        <div class="search-detail-header">
          <div class="back-btn" @click="back">
            <img src="../../../image/shop/buy/buy-23.png" alt="">
          </div>
          <div class="input-box">
            <form action="" target="the_iframe" type="post" @submit="doSearch">
              <input id="search-val" type="text" placeholder="请输入搜索内容">
            </form>
            <iframe id="is_iframe" name="the_iframe" style="display:none;"></iframe>
            <img class="search-icon" src="../../../image/shop/search/search-gray.png" @click="doSearch">
            <img class="close-icon" src="../../../image/close_.png" @click="clearInput">
          </div>
        </div>
        <div class="search-detail-nav">
          <div class="count nav-item active" @click="changeNav(0)">
            <span>综合</span>
            <img :src="isChoicCount ? '../../../image/shop/search/bottom-san-active.png' : '../../../image/shop/search/bottom-san.png' " alt="">
          </div>
          <div class="sale-count nav-item" @click="changeNav(1)">
            <span>销量</span>
          </div>
          <div class="price nav-item" @click="changeNav(2)">
            <span>价格</span>
            <div>
              <img v-if="isChoicPrice" :src="priceChoic ? '../../../image/shop/search/top-san-active.png' : '../../../image/shop/search/bottom-san-active.png' ">
            </div>
          </div>
          <div class="select nav-item" @click="changeNav(3)">
            <span>筛选</span>
          </div>
          <div class="flow-dio" v-if="showDio">
            <div class="active" @click="choicFirst(0)">综合排序</div>
            <div @click="choicFirst(1)">评分排序</div>
          </div>

          <div class="search-screen" v-show="showScreen">
            <div class="price-section">
              <h3>价格区间(元)</h3>
              <div>
                <input type="number" class="start-price" placeholder="最低价">
                <span></span>
                <input type="number" class="end-price" placeholder="最高价">
              </div>
            </div>


            <div class="location">
              <div>
                <h3>发货地</h3>
                <img :src="showLocation ? '../../../image/shop/search/hide.png' : '../../../image/shop/search/show.png'" alt="" @click="locationTogg">
              </div>
              <p>
                <span>
                  <img src="../../../image/location.png" alt="">
                  {{myCity}}
                </span>
                <em @click="getLocation">
                  <img src="../../../image/shop/search/reload.png" alt="">
                  定位
                </em>
              </p>
            </div>

            <div v-show="showLocation" style="margin-top:10px;" @click="selectLocation">
              <div class="city-list">
                <h3>城市</h3>
                <ul>
                  <li v-for="item in locationList.city" v-text="item.name">
                    广州
                    <img src="../../../image/shop/search/bg.png" alt="">
                  </li>
                </ul>
              </div>
              <div class="province">
                <h3>省份</h3>
                <div class="city-list">
                  <ul>
                    <li v-for="item in locationList.province" v-text="item.name">广东省</li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="selectBtn">
              <div @click="reset">重置</div>
              <div @click="selectCity">确定</div>
            </div>
          </div>
        </div>
      </div>

      <div style="height: 110.3px;"></div>
      <!-- 商品列表 -->
      <div class="content goods-list-classfiy goods-list">
        <ul>
          <li v-for="item in hotList" v-if="!is_yzc" :class="item.group_booking ? 'is-group': ''" @click="toGoodsDetail(item.goods_id,item.group_booking)">
            <div class="img-box">
              <img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'" />
              <div class="fy-img" v-if="userInfo.team_leader_level >= 1 && (item.commission1_rate != 0 || item.commission2_rate != 0)">
                <p>
                  <i v-if="item.commission1_rate != 0">一级分佣<span>{{item.commission1_rate}}%</span></i>
                  <i v-if="item.commission2_rate != 0">二级分佣<span>{{item.commission2_rate}}%</span></i>
                </p>
              </div>
            </div>
            <div class="goods-title" v-text="item.name">标题</div>
            <div class="goods-msg">
              <div>
                <span><i>￥</i>{{item.group_booking ? item.group_price : item.sale_price}}</span>
                <span><i v-text="item.group_booking ? '已拼': '已出售'"></i>{{item.sale_count}}件</span>
              </div>
              <div v-if="item.group_booking" class="group-avater">
                <div class="avater-list" v-for="group in item.open_group">
                  <img :src="group.avater" alt="">
                </div>
              </div>
              <div class="buy-btn">
                <span v-text="item.group_booking ? '去拼团': '去购买'"></span>
              </div>
            </div>
          </li>

          <li v-for="item in hotList" v-if="is_yzc" @click="toGoodsDetail(item.goods_id,item.group_booking, item.is_yzc)">
            <div class="img-box">
              <img :src="item.cover+'?x-oss-process=image/resize,m_lfit,w_960'" />
              <!-- <div class="fy-img" v-if="userInfo.team_leader_level >= 1 && (item.commission1_rate != 0 || item.commission2_rate != 0)">
                <p>
                  <i v-if="item.commission1_rate != 0">一级分佣<span>{{item.commission1_rate}}%</span></i>
                  <i v-if="item.commission2_rate != 0">二级分佣<span>{{item.commission2_rate}}%</span></i>
                </p>
              </div> -->
            </div>
            <div class="goods-title" v-text="item.name">标题</div>
            <div class="goods-msg">
              <div>
                <span class="yzc-price">
                  <img src="../../../image/shop/yzc_icon.png">
                  {{item.yzc}}
                </span>
                <span><i>已兑换</i>{{item.sale_count}}件</span>
              </div>
              <div class="buy-btn">
                <span>去购买</span>
              </div>
            </div>
          </li>
        </ul>
      </div>

      <div class="mask" v-if="showScreen" @click="closeMask"></div>
    </div>
  </body>
  <script src="../../sea.js" data-main="../../main"></script>
  <script type="text/javascript" src="../../vue.js"></script>
  <script type="text/javascript" src="./search_detail.js"></script>
</html>
